<template>
  <div class="widget-form-container">
    <el-form :label-position="data.editorOptions.config.labelPosition" :label-width="data.editorOptions.config.labelWidth" :inline="data.editorOptions.config.formInline" :style="{width:(data.editorOptions.config.formWidth || 'auto')}">
      <div class="widget-title">表单查询设计区</div>
      <draggable v-model="data.editorOptions.fields" :options="{group:'people', ghostClass: 'ghost'}" class="widget-form-list form-region" @end="handleMoveEnd" @add="handleWidgetAdd">

        <template v-for="(element, index) in data.editorOptions.fields">
          <template v-if="element.type === 'grid'">
            <div v-if="element && element.key" :key="element.key" class="widget-grid-container data-grid" style="position: relative;">
              <el-row :justify="element.options.justify" :align="element.options.align" :class="{active: selectWidget && selectWidget.key === element.key}" :gutter="element.options.gutter ? element.options.gutter : 0" :style="{'background-color':element.isMain?'#b2f9ec':''}" class="widget-grid" type="flex" @click.native="handleSelectWidget(index)">
                <el-col v-for="(col, colIndex) in element.columns" :key="colIndex" :span="col.span ? col.span : 0">
                  <div style="border: 1px dashed #999;">
                    <draggable v-model="col.fields" :options="{group:'people', ghostClass: 'ghost'}" class="widget-form-list grid-list" filter="widget-grid-container" @end="handleMoveEnd" @add="handleWidgetColAdd($event, element, colIndex)">
                      <template v-for="(el, i) in col.fields">
                        <widget-form-item v-if="el.key" :key="el.key" :element="el" :select.sync="selectWidget" :config-type.sync="currentConfigType" :index="i" :fields="col.fields" :data="data"></widget-form-item>
                      </template>
                    </draggable>
                  </div>
                </el-col>
              </el-row>
              <el-button v-if="selectWidget && selectWidget.key === element.key" title="删除" style="bottom: -20px;" circle plain type="danger" class="widget-action-delete" @click.stop="handleWidgetDelete(index)">
                <i class="el-icon-yrt-shanchu2"></i>
              </el-button>
            </div>
          </template>
          <template v-else-if="element.type === 'inline-group'">
            <div v-if="element && element.key" :key="element.key" class="widget-grid-container inline-group" style="position: relative;">
              <div :class="{active: selectWidget && selectWidget.key === element.key}" class="widget-grid" @click="handleSelectWidget(index)">
                <div style="border: 1px dashed #999;">
                  <el-form-item :label="element.label">
                    <draggable v-model="element.fields" :options="{group:'people', ghostClass: 'ghost'}" class="widget-form-list inline-list" filter="widget-grid-container" @end="handleMoveEnd" @add="handleWidgetInlineAdd($event, element)">
                      <template v-for="(el, i) in element.fields">
                        <widget-form-item-inline v-if="el.key" :key="el.key" :element="el" :select.sync="selectWidget" :config-type.sync="currentConfigType" :index="i" :fields="element.fields" :data="data"></widget-form-item-inline>
                      </template>
                    </draggable>
                  </el-form-item>
                </div>
              </div>
              <el-button v-if="selectWidget && selectWidget.key === element.key" title="删除" style="bottom: -20px;" type="danger" class="widget-action-delete" circle plain @click.stop="handleWidgetDelete(index)">
                <i class="el-icon-yrt-shanchu2"></i>
              </el-button>
            </div>
          </template>
          <template v-else-if="element.type === 'splitter-group'">
            <div v-if="element && element.key" :key="element.key" class="widget-grid-container splitter-group" style="position: relative;">
              <div :class="{active: selectWidget && selectWidget.key === element.key}" class="widget-grid" @click="handleSelectWidget(index)">
                <div style="border: 1px dashed #999;">
                  <div class="splitter-title">
                    {{ element.label }}
                  </div>
                </div>
              </div>
              <el-button v-if="selectWidget && selectWidget.key === element.key" title="删除" style="bottom: -20px;" class="widget-action-delete" circle plain type="danger" @click.stop="handleWidgetDelete(index)">
                <i class="el-icon-yrt-shanchu2"></i>
              </el-button>
            </div>
          </template>
          <template v-else>
            <widget-form-item v-if="element && element.key" :key="element.key" :element="element" :select.sync="selectWidget" :config-type.sync="currentConfigType" :index="index" :fields="data.editorOptions.fields" :data="data"></widget-form-item>
          </template>
        </template>

      </draggable>
    </el-form>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import WidgetFormItem from "./WidgetFormItem";
import WidgetFormItemInline from "./WidgetFormItemInline";

export default {
  components: {
    Draggable,
    WidgetFormItem,
    WidgetFormItemInline
  },
  props: {
    // 整个JSON对象，包含：dataOptions、editorOptions、dataListOptions
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    select: {
      type: Object,
      default: () => {
        return {};
      }
    },
    configType: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      selectWidget: this.select
    };
  },
  computed: {
    currentConfigType: {
      get: function () {
        return this.configType;
      },
      set: function (val) {
        this.$emit("update:configType", val);
      }
    }
  },
  watch: {
    select (val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler (val) {
        this.$emit("update:select", val);
      },
      deep: true
    }
  },
  methods: {
    handleMoveEnd ({ newIndex, oldIndex }) {
      // console.log('index', newIndex, oldIndex)
    },
    handleMoveStart ({ oldIndex }) {
      // console.log("start", oldIndex, this.basicComponents);
    },
    handleSelectWidget (index) {
      // console.log(index, '#####')
      this.selectWidget = this.data.editorOptions.fields[index];
      this.currentConfigType = "WidgetConfig";
    },
    handleWidgetAdd (evt) {
      const newIndex = evt.newIndex;
      // console.log(to)

      // 为拖拽到容器的元素添加唯一 key
      const key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
      this.$set(this.data.editorOptions.fields, newIndex, {
        ...this.data.editorOptions.fields[newIndex],
        options: {
          ...this.data.editorOptions.fields[newIndex].options,
          remoteFunc: "func_" + key
        },
        key,
        rules: []
      });
      delete this.data.editorOptions.fields[newIndex].icon;

      if (this.data.editorOptions.fields[newIndex].type === "radio" || this.data.editorOptions.fields[newIndex].type === "checkbox") {
        this.$set(this.data.editorOptions.fields, newIndex, {
          ...this.data.editorOptions.fields[newIndex],
          options: {
            ...this.data.editorOptions.fields[newIndex].options,
            options: this.data.editorOptions.fields[newIndex].options.options.map(item => ({
              ...item
            }))
          }
        });
      } else if (this.data.editorOptions.fields[newIndex].type === "detail-grid") {
        this.data.editorOptions.fields[newIndex].subTableView = null; // 关联子表
        this.$set(this.data.editorOptions.fields[newIndex], "buttons", [
          {
            type: "button-group",
            label: "按钮组",
            buttons: [
              {
                type: "button",
                label: "新建",
                options: {
                  icon: "el-icon-plus",
                  type: "primary",
                  authNode: "detailAdd"
                },
                key: "detail_add"
              },
              {
                type: "button",
                label: "删除",
                options: {
                  icon: "el-icon-yrt-shanchu2",
                  type: "primary",
                  authNode: "detailDelete"
                },
                key: "detail_delete"
              }
            ],
            options: {
              icon: "el-icon-yrt-anniuzu"
            }
          }
        ]);

        // delete this.data.editorOptions.fields[newIndex].options;
        delete this.data.editorOptions.fields[newIndex].rules;
      } else if (this.data.editorOptions.fields[newIndex].type === "grid") {
        this.$set(this.data.editorOptions.fields, newIndex, {
          ...this.data.editorOptions.fields[newIndex],
          columns: this.data.editorOptions.fields[newIndex].columns.map(item => ({ ...item }))
        });
        delete this.data.editorOptions.fields[newIndex].rules;
      }

      this.currentConfigType = "WidgetConfig";
      this.selectWidget = this.data.editorOptions.fields[newIndex];
    },
    handleWidgetColAdd ($event, row, colIndex) {
      // console.log('coladd', $event, row, colIndex)
      const newIndex = $event.newIndex;
      const oldIndex = $event.oldIndex;
      const item = $event.item;

      // 防止布局元素的嵌套拖拽
      if (item.className.indexOf("data-grid") >= 0) {
        // 如果是列表中拖拽的元素需要还原到原来位置
        item.tagName === "DIV" && this.data.editorOptions.fields.splice(oldIndex, 0, row.columns[colIndex].fields[newIndex]);

        row.columns[colIndex].fields.splice(newIndex, 1);

        return false;
      }

      // console.log('from', item)

      const key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);

      this.$set(row.columns[colIndex].fields, newIndex, {
        ...row.columns[colIndex].fields[newIndex],
        options: {
          ...row.columns[colIndex].fields[newIndex].options,
          remoteFunc: "func_" + key
        },
        key,
        // 绑定键值
        model: row.columns[colIndex].fields[newIndex].type + "_" + key,
        rules: []
      });

      if (row.columns[colIndex].fields[newIndex].type === "radio" || row.columns[colIndex].fields[newIndex].type === "checkbox") {
        this.$set(row.columns[colIndex].fields, newIndex, {
          ...row.columns[colIndex].fields[newIndex],
          options: {
            ...row.columns[colIndex].fields[newIndex].options,
            options: row.columns[colIndex].fields[newIndex].options.options.map(item => ({
              ...item
            }))
          }
        });
      }
      delete row.columns[colIndex].fields[newIndex].icon;

      this.currentConfigType = "WidgetConfig";
      this.selectWidget = row.columns[colIndex].fields[newIndex];
    },
    handleWidgetDelete (index) {
      if (this.data.editorOptions.fields.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {};
        } else {
          this.selectWidget = this.data.editorOptions.fields[index - 1];
        }
      } else {
        this.selectWidget = this.data.editorOptions.fields[index + 1];
      }

      this.$nextTick(() => {
        this.data.editorOptions.fields.splice(index, 1);
      });
    },
    // 行内布局
    handleWidgetInlineAdd ($event, row) {
      // console.log('coladd', $event, row, colIndex)
      const newIndex = $event.newIndex;
      const oldIndex = $event.oldIndex;
      const item = $event.item;

      // 防止布局元素的嵌套拖拽
      if (item.className.indexOf("inline-group") >= 0) {
        // 如果是列表中拖拽的元素需要还原到原来位置
        item.tagName === "DIV" && this.data.editorOptions.fields.splice(oldIndex, 0, row.fields[newIndex]);

        row.fields.splice(newIndex, 1);

        return false;
      }

      // console.log('from', item)

      const key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);

      this.$set(row.fields, newIndex, {
        ...row.fields[newIndex],
        options: {
          ...row.fields[newIndex].options
        },
        key,
        rules: []
      });

      if (row.fields[newIndex].type === "radio" || row.fields[newIndex].type === "checkbox") {
        this.$set(row.fields, newIndex, {
          ...row.fields[newIndex],
          options: {
            ...row.fields[newIndex].options,
            options: row.fields[newIndex].options.options.map(item => ({
              ...item
            }))
          }
        });
      }
      delete row.fields[newIndex].icon;

      this.currentConfigType = "WidgetConfig";
      this.selectWidget = row.fields[newIndex];
    },
    // 下来选择器参数
    selectOptions (newField, dropdown_Id, keyProp) {
      const randNum = Math.ceil(Math.random() * 99999);
      const key = Date.parse(new Date()) + "_" + randNum;
      const params = {
        type: "select",
        label: newField.label,
        options: {
          width: "280px",
          defaultValue: "",
          multiple: false,
          disabled: false,
          clearable: false,
          placeholder: "",
          required: false,
          showLabel: true,
          noLabel: false,
          options: [
            {
              value: "下拉框1"
            },
            {
              value: "下拉框2"
            },
            {
              value: "下拉框3"
            }
          ],
          remote: "bindDropdown",
          remoteOptions: [],
          dropdown_Id: dropdown_Id,
          props: {
            value: "value",
            label: "label"
          },
          remoteFunc: "",
          prop: newField.options.prop,
          dataType: newField.options.dataType
        },
        key: key
      };
      if (keyProp) {
        params.options.keyProp = keyProp;
      }
      return params;
    },
    // 向fields集合中添加字段
    addField (fields, field, width) {
      const newIndex = fields.length;
      // 为拖拽到容器的元素添加唯一 key
      const randNum = Math.ceil(Math.random() * 99999);
      const key = Date.parse(new Date()) + "_" + randNum;
      this.$set(fields, newIndex, {
        ...field,
        options: {
          ...field.options,
          remoteFunc: "func_" + key
        },
        key,
        rules: []
      });

      var newField = fields[newIndex];
      switch (newField.options.dataType) {
        case "datetime":
          newField.type = "date";
          break;
      }
      switch (newField.options.prop) {
        case "enable":
          fields[newIndex] = {
            type: "switch",
            label: newField.label,
            options: {
              defaultValue: false,
              required: false,
              disabled: false,
              noLabel: false,
              prop: newField.options.label,
              dataType: newField.options.dataType,
              "active-value": 1,
              "inactive-value": 0
            },
            key: key
          };
          break;
        case "userTrueName":
          fields[newIndex] = this.selectOptions(newField, 22, "user_Id");
          break;
        case "consignorName":
          fields[newIndex] = this.selectOptions(newField, 797, "consignor_Id");
          break;
        case "storageName":
          fields[newIndex] = this.selectOptions(newField, 31, "storage_Id");
          break;
        case "expressCorpName":
          fields[newIndex] = this.selectOptions(newField, 568, "expressCorp_Id");
          break;
        case "expressCorpType":
          fields[newIndex] = this.selectOptions(newField, 502, null);
          break;
        case "creator":
        case "createDate":
        case "modifier":
        case "modifyDate":
          newField.options.readonly = true;
          break;
        case "remark":
          fields[newIndex].type = "textarea";
          fields[newIndex].options.width = "420px";
          break;
      }
      if (fields[newIndex].type !== "switch") {
        fields[newIndex].options.width = width || "100%";
      }
      delete fields[newIndex].icon;
    },
    // 清空全部列表字段
    btnClearAll () {
      this.$confirm("确定要全部列表字段, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.data.editorOptions.fields = [];
          this.selectWidget = null;
          this.$message.error("清空完毕");
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
$primary-color: #409eff;
$primary-background-color: #ecf5ff;

.widget-form-container {
  .widget-title {
    padding: 10px;
  }

  .widget-form-list {
    height: 100%;
    padding-bottom: 0px;

    &.form-region {
      min-height: 600px;
      margin-bottom: 50px;
    }

    &.grid-list {
      min-height: 50px;
    }

    &.inline-list {
      min-height: 50px;
    }

    &.detail-list {
      min-height: 300px;
    }
  }

  .widget-grid {
    background: #f4f6fc;
    position: relative;
    border-left: 5px solid transparent;
    padding: 5px;
    margin: 0 !important;

    &.active {
      border-left: 5px solid $primary-color;
      background: #b3d8ff;
    }
  }

  .widget-grid-container {
    &.ghost {
      &::after {
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        display: block;
        z-index: 10;
        content: "";
      }
    }
  }

  .ghost {
    background: #fff;
    border: 1px dashed $primary-color;

    &::after {
      background: #fff;
    }
  }

  li.ghost {
    height: 30px;
    list-style: none;
    font-size: 0;
  }

  .splitter-title {
    padding: 10px;
    border-bottom: #dcdfe6 1px solid;
  }
}

.widget-action-delete {
  position: absolute;
  right: 20px;
  bottom: -35px;
  z-index: 1009;
}

.widget-action-clone {
  position: absolute;
  right: 70px;
  bottom: -35px;
  z-index: 1009;
}
</style>
